<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>句子库</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style>
        .icon-bar{
            background: #9d9d9d;
        }
        .navbar-nav li{
            padding: 15px 15px 15px 0px;
        }
        .navbar a{
            color: #9d9d9d !important;
        }
        .navbar a:hover{
            color: #fff !important;
        }
        .navbar-nav{
            list-style: none;
        }
        .highlight{
            padding: 9px 14px;
            margin-bottom: 14px;
            background-color: #f7f7f9;
            border: 1px solid #e1e1e8;
            border-radius: 4px;
        }
        .vticker{
            margin-top: 10px;
        }
        .vticker ul{
             padding: 0;
         }
        .vticker li{
            width: 1000px;
            list-style: none;
            border-radius:4px;
        }
        .vticker li span{
            margin-top: 10px;
        }
    </style>
</head>
<body style="background: #f7f9f9;padding-top: 20px;padding-bottom: 20px;">
<div class="container">
        <div>
            <nav class="navbar" style="background: #6e42c1;border-color: #ffffff;">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">句子库</a>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
                        <ul class="navbar-nav">
                            <li class="active"><a href="#">句子库</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">分类<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">治愈</a></li>
                                    <li><a href="#">伤感</a></li>
                                    <li><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">头像库</a></li>
                            <li><a href="#">音乐库</a></li>
                        </ul>
                        <ul class="navbar-nav navbar-right">
                            <li class="active"><a href="#" data-toggle="modal" data-target="#myLogin">登录</a></li>
                            <li><a href="#" data-toggle="modal" data-target="#myRegister">注册</a></li>
                        </ul>
                    </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
            </nav>
        </div>


    <div class="jumbotron" style="background: #fff">

        <div>
            <div>
                <h2>添加一条</h2>
            </div>
        </div>

        <button class="aa btn">添加一条</button>
        <button class="vis btn">5条滚动</button>
        <button class="visall btn">显示所有</button>
        <button class="up btn">下一条</button>
        <button class="down btn">上一条</button>
        <button class="toggle btn">滚动</button>
        <div class="vticker bs-example bs-example-bg-classes">
            <ul>
                <%
                    for(senten in list){
                %>
                <li class="highlight">${senten.senten}</li>
                <%
                }
                %>
                <li class="highlight">11</li>
            </ul>
        </div>
    </div>
    <%
        include("/userTemp.html"){}
    %>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="${ctxPath}/js/jquery.easing.min.js"></script>
<script src="${ctxPath}/js/jquery.easy-ticker.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var dd = $('.vticker').easyTicker({
            direction: 'up',
            easing: 'easeInBack',
            speed: 'slow',
            interval: 1000,
            height: '450px',
            visible: 1,
            mousePause: 3,
            controls: {
                up: '.up',
                down: '.down',
                toggle: '.toggle',
                playText: '开始滚动',
                stopText: '暂停滚动'
            }
        }).data('easyTicker');

        cc = 1;
        $('.aa').click(function(){
            var context = prompt("请输入");
            $('.vticker ul').append('<li class="highlight">' + context + '</li>');
            cc++;
        });

        $('.vis').click(function(){
            dd.options['visible'] = 3;
        });
        $('.visall').click(function(){
            dd.stop();
            dd.options['visible'] = 0 ;
            dd.start();
        });
    });
</script>
</body>
</html>